<template>
  <app-container :percept="percept">
    <view class="container">
      <app-navbar :title="$t('common.drama')" :show-left="false"></app-navbar>
      <app-tabbar current="drama"></app-tabbar>

      <view class="flex-col pos_4">
        <view class="flex-row relative mt-12 list-item" v-for="(item, index) in welfareItems" :key="index" @click="skipToDetail(item)">
          <view class="flex-row items-center flex-1 self-center">
            <image class="shrink-0 image_5" src="@/static/common/i-kingBadge.png" v-if="item.type === 2" />
            <image class="shrink-0 image_5" src="@/static/common/i-warriorBadge.png" v-else />
            <view class="ml-8 flex-col items-start flex-1">
              <text class="font_2">{{ item.title }}</text>
              <!--  <text class="font_4 text_2">(Experience card)</text> -->
              <text class="font_3 text_3">{{ $t('drama.cycle') }}: {{ item.periodVoListString }} {{ $t('drama.day') }}</text>
            </view>
          </view>
          <view class="ml-12 flex-col items-end shrink-0 self-start group">
            <view class="group_2">
              <text class="font_3">{{ $t('drama.highest') }}:</text>
              <text class="font ml-6">{{ (item.highReturnProbability * 100).toFixed(2) }}%</text>
            </view>
            <text class="mt-46 font_2 text_4">{{statusDict[item.status] }}</text>
          </view>
        </view>
      </view>
    </view>
  </app-container>
</template>

<script>
import lifecycleMixin from '@/mixins/lifecycle.js';

import AppTabbar from '@/components/AppTabbar.vue';
import { getBadgeListAPI } from '@/service/index.js';

import { mapGetters } from 'vuex';

export default {
  mixins: [lifecycleMixin],
  components: { AppTabbar },
  data() {
    return {
      welfareItems: [],
      statusDict: {
        0: this.$t('drama.notPurchase'),
        1: this.$t('drama.inProgressing'),
        2: this.$t('drama.finished')
      },
    };
  },
  computed: {},

  onLoad() {
    this.getAllBadgeList();
  },

  methods: {


    skipToDetail(item) {
      // 首次购买
      if (item.title === 'King badge' && item.status === 0) {
        uni.navigateTo({
          url: '/pages/drama/kingsBadge?detail=' + encodeURIComponent(JSON.stringify(item))
        });
      }
      //更新充值
      else if (item.title === 'King badge' && item.status === 1) {
        uni.navigateTo({
          url: '/pages/drama/inCome?sourceId=' + item.tpUserBadge.id + '&badgePeriodId=' + item.tpUserBadge.badgeId
        });
      }
      //warriorBadge 首次购买
      else {
        uni.navigateTo({
          url: '/pages/drama/warriorBadge?detail=' + encodeURIComponent(JSON.stringify(item))
        });
      }
    },
    async getAllBadgeList() {
      const res = await getBadgeListAPI();
      this.welfareItems = res.data;
      console.log('xxxx', this.welfareItems);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  background-image: url('@/static/common/b-home.png');
  background-size: cover;
  padding-bottom: 10rem;
  min-height: 100%;
  color: #ffffff;

  .ml-5 {
    margin-left: 0.31rem;
  }

  .pos_4 {
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 3.5rem;

    .list-item {
      padding: 0.75rem;
      background-color: #ffffff33;
      border-radius: 1rem;
      box-shadow: 0rem -0.75rem 1.5rem #05dfff1a inset, 0rem 0.75rem 1.5rem #fb98ad26 inset, 0rem 0.25rem 0.5rem #0000004d;
      backdrop-filter: blur(1rem);

      &:first-child {
        margin-top: 0;
      }

      .image_5 {
        border-radius: 0.5rem;
        width: 5rem;
        height: 5rem;
      }

      .font_2 {
        font-size: 0.88rem;
        font-family: PingFang SC;
        line-height: 0.82rem;
        color: #ffffff;
      }

      .font_4 {
        font-size: 0.75rem;
        font-family: PingFang SC;
        line-height: 0.82rem;
        color: #ffffff80;
      }

      .text_2 {
        margin-top: 0.5rem;
        line-height: 0.77rem;
      }

      .font_3 {
        font-size: 0.75rem;
        font-family: PingFang SC;
        line-height: 0.7rem;
        color: #ffffff80;
      }

      .text_3 {
        margin-top: 0.88rem;
        line-height: 0.69rem;
      }

      .group {
        margin-top: 0.5rem;

        .group_2 {
          line-height: 0.7rem;
        }

        .text_4 {
          color: #00f6ff;
          line-height: 0.81rem;
        }
      }
    }
  }
}
</style>
